<template>
    <div class="wrapper">
        <header>
            我的信息
        </header>
        <div class="user_card">
            <div class="avatar">
                <img class="user_img" src="../assets/userImg/yhtx01.png" alt="头像" v-if="user.userImg==null || user.userImg==''">
                <img class="user_img" :src="user.userImg"  alt="头像" v-else="user.userImg!=null">
            </div>
            <div class="user_infos">
                <div class="user_intro">
                    {{ user.userName }}
                </div>
            </div>
            <!-- 积分，红包，地址，订单 -->
            <div class="function_card">
                <div class="item" @click="toPage('orders')">
                    <i class="fa fa-file-text-o" style="padding-right: 2vw;"></i>
                    订单
                </div>
                <div class="item" @click="toPage('myAddress')">
                    <i class="fa fa-address-card" style="padding-right: 2vw;"></i>
                    地址
                </div>
                <div class="item" @click="toPage('redBag')">
                    <i class="fa fa-envelope" style="padding-right: 2vw;"></i>
                    红包
                </div>
                <div class="item">
                    <i class="fa fa-folder-o" style="padding-right: 2vw;"></i>
                    积分: {{ points }}
                </div>
            </div>
        </div>
        <Footer></Footer>

    </div>
</template>

<script>
import Footer from '../components/Footer.vue'


export default {
    name: 'UserInfo',
    data() {
        return {
            user: {},
            points: {}
        }
    },
    created() {
        this.user = this.$getSessionStorage('user');
        this.$axios.get('/PointController/showPointByUserId', {
            params: {
                userId: this.user.userId
            }
        }).then(response => {
            this.points = response.data.data;
            return response.data.data;
        }).catch(error => {
            console.error(error);
        })
    },
    methods: {
        toPage(nav) {
            console.log(nav);
            switch (nav) {
                case 'redBag':
                    console.log("去红包");
                    this.$router.push({ path: '/redBag' });
                    break;
                case 'point':
                    console.log("去积分");
                    this.$router.push({ path: '/point' });
                    break;
                case 'myAddress':
                    console.log("去地址");
                    this.$router.push({ path: '/myAddress' });
                    break;
                case 'orders':
                    console.log("去订单");
                    this.$router.push({ path: '/orderList' })
                    break;
            }
        }
    },
    components: {
        Footer
    }
}
</script>

<style scoped>
.wrapper {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    flex-direction: column;
}

.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper .user_card {
    
    width: 100%;
    display: flex;
    position: absolute;
    top: 13vw;
    flex-direction: column;
    padding-bottom: 0.75rem;
    font-size: 16px;
}


.wrapper .user_card .avatar {
    top: 2vw;
    position: relative;
    height: 25vw;
    width: 100%;
    /* background-color: #fff; */
    overflow: hidden;
    background-size: cover;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.wrapper .user_card .avatar .user_img {
    border-radius: 50%;
    width: 25vw;
    height: 25vw;
}

.wrapper .user_infos {
    position: relative;
    display: flex;
    flex-direction: column;
    /* flex-direction: column; */
    width: 100%;
    height: 18vw;
    justify-content: center;
    align-items: center;
    overflow: visible;

}


.wrapper .user_card .user_infos .user_intro {
    width: 100%;
    font-size: 8vw;
    align-items: center;
    display: flex;
    justify-content: center;
    font-weight: 300;
}

.wrapper .user_card .function_card {
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    width: 90%;
    height: 60vw;
    justify-content: space-around;
    align-items: center;
    padding-top: 5vw;
    position: relative;
    left: 5vw;
}

.wrapper .user_card .function_card .item {
    width: 90%;
    height: 40vw;
    display: flex;
    /*弹性盒子主轴方向设为column，然后仍然是垂直水平方向居中*/
    /* flex-direction: column; */
    /* justify-content: center; */
    align-items: center;
    user-select: none;
    cursor: pointer;
    padding-left: 4vw;
    border-radius: 0.8vw;
    box-shadow: 0 1vw 2vw 0 rgba(0, 0, 0, 0.1)

}
</style>